<template>
  <div
    id="drag-container"
    @mousedown="startDragging"
    @mousemove="dragging"
    @mouseup="stopDragging"
    @wheel="handleWheel"
    ref="dragContainerRef"
  >
    <div
      id="drag"
      :style="{
        top: `${position.draggablePosition.y}px`,
        left: `${position.draggablePosition.x}px`,
        transform: `scale(${position.scale})`,
        'transform-origin': `center`
      }"
    >
      <slot></slot>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'

const dragContainerRef = ref(null)

const position = ref({
  scale: 1,
  draggablePosition: { x: 0, y: 0 },
  isDragging: false,
  startPosition: { x: 0, y: 0 },
  mouseCoordinates: { x: 0, y: 0 }
})

const startDragging = (event) => {
  position.value.isDragging = true
  position.value.startPosition.x = event.clientX - position.value.draggablePosition.x
  position.value.startPosition.y = event.clientY - position.value.draggablePosition.y
}
const dragging = (event) => {
  if (!position.value.isDragging) return
  position.value.draggablePosition.x = event.clientX - position.value.startPosition.x
  position.value.draggablePosition.y = event.clientY - position.value.startPosition.y
}
const stopDragging = () => {
  position.value.isDragging = false
}

// 鼠标滚轮跟手缩放
const handleWheel = (event) => {
  event.preventDefault()
  // 更新缩放比例
  if (event.deltaY > 0) {
    position.value.scale *= 1.1
  } else {
    position.value.scale /= 1.1
  }
  console.log(position.value.scale)
}

// 放大
const handleMagnify = () => {
  position.value.scale *= 1.1
}

// 缩小
const handleLessen = () => {
  position.value.scale /= 1.1
}

// 居中
const handleAlignCenter = () => {
  // 父元素宽度
  const parentWidth = dragContainerRef.value.offsetWidth
  // 父元素高度
  const parentHeight = dragContainerRef.value.offsetHeight
  // 子元素宽度
  const childWidth = dragContainerRef.value.firstElementChild.offsetWidth
  // 子元素高度
  const childHeight = dragContainerRef.value.firstElementChild.offsetHeight
  // console.log(parentWidth, parentHeight, childWidth, childHeight)
  // 子元素的位置
  position.value.draggablePosition.x = (parentWidth - childWidth) / 2
  position.value.draggablePosition.y = (parentHeight - childHeight) / 2
}

// 置顶
const handleAlignTop = () => {
  // 父元素宽度
  const parentWidth = dragContainerRef.value.offsetWidth
  // 子元素宽度
  const childWidth = dragContainerRef.value.firstElementChild.offsetWidth
  // 子元素的位置
  position.value.draggablePosition.x = (parentWidth - childWidth) / 2
  position.value.draggablePosition.y = (childWidth * (position.value.scale - 1)) / 2
}

// 置底
const handleAlignBottom = () => {
  // 父元素宽度
  const parentWidth = dragContainerRef.value.offsetWidth
  // 父元素高度
  const parentHeight = dragContainerRef.value.offsetHeight
  // 子元素宽度
  const childWidth = dragContainerRef.value.firstElementChild.offsetWidth
  // 子元素高度
  const childHeight = dragContainerRef.value.firstElementChild.offsetHeight
  // 子元素的位置
  position.value.draggablePosition.x = (parentWidth - childWidth) / 2
  position.value.draggablePosition.y =
    parentHeight - childHeight - (childHeight * (position.value.scale - 1)) / 2
}

// 初始化元素默认缩放点
const handleInitScalePoint = () => {
  // 子元素宽度
  const childWidth = dragContainerRef.value.firstElementChild.offsetWidth
  // 子元素高度
  const childHeight = dragContainerRef.value.firstElementChild.offsetHeight
  // 子元素的位置
  position.value.mouseCoordinates.x = childWidth / 2
  position.value.mouseCoordinates.y = childHeight / 2
}

onMounted(() => {
  handleAlignCenter()
  // handleInitScalePoint()
})

defineExpose({
  handleAlignCenter,
  handleAlignTop,
  handleAlignBottom,
  handleMagnify,
  handleLessen
})
</script>
<style lang="scss" scoped>
@import url('./index.scss');
</style>
